<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>布局</title>
<link rel="stylesheet" href="../../Content/css/bootstrap.min.css" />
<link rel="stylesheet" href="../../Content/css/font-awesome.min.css" />
<link rel="stylesheet" href="../../Content/css/mycss.css" />
</head>

<body >
<div class="container-fluid">
	<h3>框架结构布局</h3>
    <p>整个框架如下代码结构所示分为上下两行结构,头部 <font color="#FF0000">head</font>,主体内容部分 <font color="red">main</font>。</p>
    <div>
    	<pre>
        	<code>
            	&lt;!--头部区域--&gt;
                &lt;div class="head"&gt;
                    &lt;!--Logo--&gt;
                    &lt;div class="logo pull-left">&lt;a href="/"&gt;&lt;img src="../../Content/images/logo.png"&gt;&lt;/a&gt;&lt;/div&gt;
                    &lt;!--标题--&gt;
                    &lt;h4 class="pull-left sys-name"&gt;电子商务平台&lt;/h4&gt;
                    &lt;!--当前登陆状态--&gt;
                    &lt;div class="pull-right user"&gt;
                      ...
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;!--主体内容区域--&gt;
                &lt;div class="main"&gt;
                    &lt;!--左侧菜单部分--&gt;
                    &lt;div class="main_left" &gt;
                        &lt;!--菜单根节点标题--&gt;
                        &lt;div class="menu-title"&gt;
                            &lt;span&gt;功能菜单&lt;/span&gt;
                            &lt;div class="menu-collapse" id="menu-collapse" data-open="open"&gt;&lt;i class="icon-double-angle-left"&gt;&lt;/i&gt;&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;!--菜单选项内容--&gt;
                        &lt;ul class="mymenu" id="mymenu"&gt;
                            &lt;li&gt;
                                &lt;a href="#"&gt;
                                    &lt;i class="glyphicon glyphicon-th-large"&gt;&lt;/i&gt;
                                    &lt;span&gt;系统管理&lt;/span&gt;
                                &lt;/a&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;a  href="#"&gt;
                                    &lt;i class="glyphicon glyphicon-th-large"&gt;&lt;/i&gt;
                                    &lt;span&gt;系统管理&lt;/span&gt;
                                &lt;/a&gt;
                                &lt;!--子菜单项--&gt;
                                &lt;ul class="submenu"&gt;
                                    &lt;li&gt;
                                        &lt;a href="#"&gt;       
                                            &lt;span&gt;系统管理1&lt;/span&gt;
                                        &lt;/a&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href="#"&gt;                  
                                            &lt;span&gt;系统管理&lt;/span&gt;
                                        &lt;/a&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href="#"&gt;     
                                            &lt;span&gt;系统管理&lt;/span&gt;
                                        &lt;/a&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href="#"&gt;
                                            &lt;span&gt;系统管理&lt;/span&gt;
                                        &lt;/a&gt;
                                    &lt;/li&gt;
                                &lt;/ul&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;a href="#"&gt;
                                    &lt;i class="glyphicon glyphicon-th-large"&gt;&lt;/i&gt;
                                    &lt;span&gt;系统管理&lt;/span&gt;
                                &lt;/a&gt;
                                &lt;!--子菜单项--&gt;
                                &lt;ul class="submenu"&gt;
                                    &lt;li&gt;
                                        &lt;a href="#"&gt;
                                            &lt;span&gt;系统管理1&lt;/span&gt;
                                        &lt;/a&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href="#"&gt;
                                            &lt;span&gt;系统管理&lt;/span&gt;
                                        &lt;/a&gt;
                                    &lt;/li&gt;
                                 &lt;/ul&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;a href="#"&gt;
                                    &lt;i class="glyphicon glyphicon-th-large"&gt;&lt;/i&gt;
                                    &lt;span&gt;系统管理&lt;/span&gt;
                                &lt;/a&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/div&gt;
                    &lt;!--右侧内容部分--&gt;
                    &lt;div class="main-right" &gt;
                    	&lt;!--此区域内容每个页面并不完全相同不详解--&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                
            </code>
        </pre>
    </div>
</div>

</body>
</html>
